<template>
    <div class="forum">
        <!-- BEGIN container -->
        <div class="container">
            <div class="row">
                <div class="col-xl-10">
                    <!-- BEGIN title -->
                    <div class="title">
                        <div class="title-1">
                            <img src="images/logo/school.jpg" alt="">
                            <div class="title-text">
                                <a class="text-danger" href="#">中国矿业大学吧</a>   
                                <button type="button" class="btn btn-danger ">关注</button>
                            </div>
                        </div>
                        <p>挖掘希望，开采光明</p>
                    </div>
                    <!-- END title -->
                    <!-- BEGIN btn-toolbar -->
                    <div class="btn-toolbar"  style="margin-left:0px">
                        <button type="button" class="btn btn-default">看帖</button>
                        <button type="button" class="btn btn-default">精品</button> 
                        <a href="悬赏页.html"><button type="button" class="btn btn-default">悬赏</button> </a>                    
                    </div>
                    <!-- END btn-toolbar -->
                    <!-- BEGIN content -->
                    <div class="content">
                        <!-- BEGIN show1 置顶 -->
                        <div v-show="show1" >
                            <table class="table table-hover " >  
                                <tbody>
                                    <tr v-for="(item,forum) in list" v-bind:key="forum">
                                        <td class="">{{item.group}}</td>
                                        <td class="">{{item.name}}</td>
                                        <td><button type="button" class="btn btn-primary">{{item.num}}</button></td>
                                        <td v-if="item.head"><button type="button" class="btn btn-danger">置顶</button></td>
                                        <!-- <td v-else></td> -->
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <!-- END show1 置顶 -->
                        <!-- BEGIN show3 非置顶 -->
                        <div v-show="show3">
                            <table class="table table-hover">
                                <tbody>
                                    <tr v-for="(item,forum) in list" v-bind:key="forum">
                                        <td><button type="button" class="btn btn-primary">{{item.num}}</button></td>
                                        <td class="">{{item.group}}</td>
                                        <td class="">{{item.name}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                        <!-- END show3 非置顶 -->
                    </div>
                    <!-- END content -->
                    

                    <!-- BEGIN NAV 分页 -->
                    <div class="nav-page">
                        <nav aria-label="Page navigation">
                            <ul class="pagination">
                                <li>
                                    <a href="#" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li>
                                    <a href="#" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                    <!-- BEGIN NAV 分页 -->
                </div>
            </div>
        </div>
        <!-- END container -->
        <service-bar></service-bar>
    </div>
</template>
<script>
    import ServiceBar from './../components/ServiceBar'
    export default {
        name:'forum',
        components:{
            ServiceBar
        },
        data(){
            return {
                text: '',
                show1:true,
                show3:false,
                list:[
                    {
                        id:1,
                        name:'小明',
                        group:'求问矿大军训苦不苦，在线等，挺急的',
                        num:'47',
                        good:true,
                        head:true
                    },
                    {
                        id:2,
                        name:'小红',
                        group:'有人上过高级前端的课吗，觉得怎样啊？',
                        num:'25',
                        good:true,
                        head:true
                    },
                    {
                        id:3,
                        name:'小江',
                        group:'找一个之前参加xx比赛的学姐，她之前把校园卡落我这了',
                        num:'53',
                        good:false,
                        head:false
                        
                    },
                    {
                        id:4,
                        name:'小文',
                        group:'找一个人一起去参加xx比赛，组好三人，需要会点计算机',
                        num:'20',
                        good:false,
                        head:false
                        
                    },
                ]
            }
        }
    }
</script>
<style lang="scss">
    .forum{
        .container{
            height: auto;
            .col-xl-10{
                .title{
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    align-items: baseline;
                    .title-1{
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        img{
                            width:150px;
                            border:1px solid #e3e3e3;
                        }
                        .title-text{
                            a{
                                font-size: 30px;
                            }
                            button{
                                height: 30px;
                                width: 60px;
                                font-size: 12px;
                            }
                        }
                    }
                    p{
                        float: right;
                    }
                }
                .btn-toolbar{
                    background-color: #f7f7f7;
                    button{
                        border: 1px solid #cccccc;
                    }
                }
                .content{
                    margin-bottom: 10rem;
                }
                .nav-page{
                    width: 150px;
                    margin: 0 auto;
                    text-align: center;
                    nav{
                        ul{
                            display: flex;
                            justify-content: space-around;
                            li{
                                a{
                                    font-size: 15px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>